<template>
    <van-nav-bar title="购物车" left-text="返回" fixed left-arrow @click-left="($router.push('/'))" />
    <div style="height: 50px;"></div>

    <!-- 没数据 -->
    <van-empty v-if="!usercarts.length" description="购物车空空如也，快去购买商品">
        <van-button round type="primary" class="bottom-button" @click="dl">按钮</van-button>
        22
    </van-empty>
    <!-- 有数据 -->
    <div v-else>
        <van-swipe-cell v-for="item in usercarts">
            <van-card :price="item.goods.goods_price" :title="item.goods.goods_name" class="goods-card">
                <template #thumb>
                    <van-checkbox v-model="item.checked"></van-checkbox>
                    <img style="height: 100px;width: 100px;" :src="item.goods.goods_big_logo" alt="">
                </template>
                <template #num>
                    <van-stepper v-model="value" theme="round" button-size="22" disable-input />
                </template>
            </van-card>
            <template #right>
                <van-button square text="删除" type="danger" @click="delcart(item.id)" class="delete-button"
                    style="height: 100%;" />
            </template>
        </van-swipe-cell>
    </div>
    <van-submit-bar :price="priceAll" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checkedAll">全选</van-checkbox>
        <template #tip>
            你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
        </template>
    </van-submit-bar>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useCounterStore } from '@/stores/cart'
const stores = useCounterStore()
let usercarts = ref([])
const data = () => {
    let username = localStorage.getItem('username')
    usercarts.value = stores.cart.filter((item) => item.username == username)
    console.log(usercarts.value)
}
data()
const delcart = (id) => {
    console.log('删除的id', id)
    stores.delcart(id)
    data()
}
const checkedAll=computed({
    get(){
        if(usercarts.value.length==0){
            return false
        }
        else{
            return usercarts.value.every(item=>item.checked)
        }
    },
    set(val){
        return usercarts.value.filter(item=>item.checked=val)
    }
})
const priceAll=computed(()=>{
    let priceAll=0
    let cartok=usercarts.value.filter(item=>item.checked)
    cartok.forEach(item=>{
        priceAll+=item.number*item.goods.goods_price
    })
    return priceAll*100
})
import {CreateOrderApi} from '@/api/api'
import {useRouter} from 'vue-router'
let router=new useRouter()
const onSubmit=()=>{
     let orderok=usercarts.value.filter(item=>item.checked)

     CreateOrderApi({
        goodsIds:orderok.map(item => item.goods.goods_id).join(''),
        username:localStorage.getItem('username'),
        product_code:orderok[0].goods.goods_name,
        totalPrice:priceAll.value,
        nums:orderok.map(item=>item.number).join(',')
     }).then(res=>{
        console.log('生成订单',res)
        router.push('/order/'+res.data.data.orderid)
     })
}
</script>

<style lang="scss" scoped></style>